import { createApp } from 'vue'
import { createPinia } from 'pinia'

// import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import {
  Tabbar,
  TabbarItem,
  Search,
  Icon,
  Loading,
  Skeleton,
  Tabs,
  Tab,
  Sticky,
  NavBar,
  Form,
  CellGroup,
  Field,
  Button,
  Swipe,
  SwipeItem,
  Image,
  ImagePreview,
  Collapse,
  CollapseItem,
  PullRefresh,
  Rate,
} from 'vant'
// import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
import router from './router'
import lazyPlugin from './directives/lazyLoading'
import { Badge } from 'vant'
import { Dialog } from 'vant'
import { Cell } from 'vant'
import { Overlay } from 'vant'
import 'vant/lib/index.css'

// import './assets/main.css'
import './assets/common.scss'
import i18n from './locales'

const app = createApp(App)
app.use(i18n)

app.use(createPinia())
app.use(router)
app.use(PullRefresh)
app.use(Overlay)
app.use(Rate)
app.use(Badge)
app.use(Image)
app.use(Tabbar)
app.use(TabbarItem)
app.use(Search)
app.use(Icon)
app.use(Loading)
app.use(Skeleton)
app.use(Tabs)
app.use(Cell)

app.use(Tab)
app.use(Sticky)
app.use(NavBar)
app.use(Form)
app.use(CellGroup)
app.use(Field)
app.use(Button)
app.use(Swipe)
app.use(SwipeItem)
app.use(Dialog)
app.use(ImagePreview)

app.use(lazyPlugin)
app.use(Collapse)
app.use(CollapseItem)
// app.use(ElementPlus)

const rootValue = 16
const rootWidth = 390
var windowWidth = window.outerWidth
// for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
//   app.component(key, component)
// }
const deviceWidth = document.documentElement.clientWidth
if (windowWidth < 1200) {
  document.documentElement.style.fontSize = (deviceWidth * rootValue) / rootWidth + 'px'
}

// 3-4
// 4-2
app.mount('#app')
